$ie7-support: false
$lang-front: left
$lang-back: right

// Center Grid
// @include center-grid
@mixin center-grid
  .center-grid
    display: block
    float: none
    @include auto-center

// Alpha and Omega
@mixin first-last
  .alpha
    margin-left: 0
    padding-left: 0
  .omega
    margin-right: 0
    padding-right: 0

// Center a sized element
@mixin auto-center
  margin-left: auto
  margin-right: auto

@mixin float-left
  float: $lang-front


// IE Specific Hacks - Border Box Fix
@mixin ie7-grid-element($decimal)
  @if $ie7-support
    /* IE7 */
    *width: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
    /* IE7 */
  
@mixin ie7-push($decimal)
  @if $ie7-support
    /* IE7 */
    *#{$lang-front}: expression(Math.floor(#{$decimal} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
    /* IE7 */
  
@mixin ie7-pull($decimal)
  @if $ie7-support
    /* IE7 */
    *#{$lang-front}: expression(Math.floor(#{$decimal * -1} * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")
    /* IE7 */


@mixin grid($content-width: 960px, $width:98%, $space:2%, $rows:20, $direction:$lang-front)
  .container
    width: $content-width
    @include auto-center
    [class*="grid-"]
      +box-sizing(border-box)
      float: $direction
      padding: 0 15px
      @if $ie7-support
        /* IE7 */
        *padding-left: 0
        *padding-right: 0
        /* IE7 */
        & > *
          /* IE7 */
          *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")
          *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")
          /* IE7 */
      position: relative
      
  
    @include first-last
  
    // Rows by 5
    @for $i from 1 through $rows
      $num: $i * 5
      $decimal: $num / 100
      .grid-#{$num}
        width: 1% * $num
        @include ie7-grid-element($decimal)
      .pull-#{$num}
        #{$direction}: -(1% * $num)
        @include ie7-pull($decimal)
      .push-#{$num}
        #{$direction}: (1% * $num)
        @include ie7-push($decimal)
  
    // Rows by 25
    @for $i from 1 through 2
      $num: $i * 33
      $mul: 1/3
      $decimal: $i * $mul
      $percent: ($num + $decimal)
  
      .grid-#{$num}
        width: 1% * $percent
        @include ie7-grid-element($decimal)
      .pull-#{$num}
        #{$direction}: -(1% * $percent)
        @include ie7-pull($decimal)
      .push-#{$num}
        #{$direction}: (1% * $percent)
        @include ie7-push($decimal)

    @include center-grid


// Mobile Grid Generator - NO PUSH OR PULL
// @include grid-generator(480px, 20px, 12)
@mixin grid-mobile ($width: 100%, $space: 2%, $direction: $lang-front)
  $grid-width: 100%
  .container
    width: $width
    @include auto-center
    [class*="grid-"]
      display: inline
      float: $direction
      width: $grid-width
      [class*="grid-"],
      [class*="mobile-grid-"]
        padding: 0
        margin: 0
    
    // Mobile Grid
    @for $i from 1 through 3
      $num: $i * 25
      .mobile-grid-#{$num}
        width: 1% * $num
      .mobile-pull-#{$num}
        #{$direction}: -(1% * $num)
      .mobile-push-#{$num}
        #{$direction}: (1% * $num)
    
    @include center-grid
    @include first-last
    [class*="pull-"],
    [class*="push-"]
      #{$direction}: 0
  @include hide-mobile



// Semantic Grid
@mixin sem-container($total-width)
  width: $total-width
  @include auto-center

@mixin sem-grid($col-width, $padding: 15px)
  +box-sizing(border-box)
  @include float-left
  padding: 0 $padding
  position: relative
  width: 1% * $col-width

@mixin sem-push($offset-push, $direction: $lang-front)
  #{$direction}: (1% * $offset-push)

@mixin sem-pull($offset-pull, $direction: $lang-front)
  #{$direction}: -(1% * $offset-pull)



// IE7 Support for Semantic Grids

@mixin sem-ie-grid($num, $space:2%)
  $decimal: $num / 100
  @include ie7-grid-element($decimal)
  @if $ie7-support
    *padding-left: 0
    *padding-right: 0
    & > *
      *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")
      *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")

@mixin sem-ie-push($num, $space:2%)
  $decimal: $num / 100
  @include ie7-push($decimal)

@mixin sem-ie-pull($num)
  $decimal: $num / 100
  @include ie7-pull($decimal)


@mixin sem-ie-grid-thirds($num, $space:2%)
  $mul: 1/3
  $decimal: $num * $mul
  @include ie7-grid-element($decimal)
  @if $ie7-support
    *padding-left: 0
    *padding-right: 0
    & > *
      *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")
      *margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === "block" && this.currentStyle.width === "auto") && "#{$space}")

@mixin sem-ie-push-thirds($num)
  $mul: 1/3
  $decimal: $num * $mul
  @include ie7-push($decimal)

@mixin sem-ie-pull-thirds($num)
  $mul: 1/3
  $decimal: $num * $mul
  @include ie7-pull($decimal)



// Grid Mixin Combined
@mixin grid-generate($content-width: 960px, $width:98%, $space:2%, $rows:20)
  
  @include grid($content-width, $width, $space, $rows)
  
  @media screen and (max-width: 600px)
    @include grid-mobile
  
  @media screen and (max-width: 920px)
    .container
      width: 98%
  
  @media screen and (min-width: 1120px)
    .container
      width: 1120px 
